<template>
  <el-container>
    <el-header style="height: 100%;border: 1px">
      <el-menu class="el-menu-demo" mode="horizontal" :router="true">
        <el-col :span="6" style="margin: 0px 43% 0px 10px ">
          <h2 style="font-size: 35px">:D豆嗲</h2>
        </el-col>
        <el-menu-item index="/storeAdmin.html" style="padding: 40px 5px 62px 5px">首页</el-menu-item>
        <el-menu-item  style="padding: 40px 5px">/</el-menu-item>
        <el-menu-item index="/storeShowOrders.html" style="padding: 40px 5px 62px 5px">我的订单</el-menu-item>
        <el-menu-item  style="padding: 40px 5px">/</el-menu-item>
        <el-menu-item index="/modifyPassword.html" style="padding: 40px 5px 62px 5px">修改密码</el-menu-item>
        <el-menu-item  style="padding: 40px 5px">/</el-menu-item>
        <el-menu-item  style="padding: 40px 5px 62px 5px" @click="logout">注销</el-menu-item>
      </el-menu>
    </el-header>

    <div class="content" v-if="orders.length>0">
      <el-row style="margin: 20px 0px 0px 180px;">
        <el-col :span="21" >
          <el-card>
            <el-table ref="multipleTable" :data="orders" tooltip-effect="dark" style="width: 100%" :header-cell-style="{'text-align':'center'}" :cell-style="{'text-align':'center'}">
              <el-table-column prop="goodname" label="商品名称">
              </el-table-column>
              <el-table-column prop="price" label="单价(元)" >
              </el-table-column>
              <el-table-column prop="count" label="数量" >
              </el-table-column>
              <el-table-column prop="subtotal" label="小计(元)" >
              </el-table-column>
            </el-table>
            <el-row>
              <el-col :span="5" :offset="13">
                <p style="font-size: 20px">收货人：{{ this.orders[0].username }}</p>
              </el-col>
              <el-col :span="5" >
                <p style="font-size: 20px">收货地址：{{ this.orders[0].useraddress }}</p>
              </el-col>
            </el-row>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <div v-else class="cart-empty">
      <el-empty description=" ">
        <h2>还没有客户下单哦~</h2>
      </el-empty>
    </div>

    <br><br><br>
    <el-footer  style="padding:0px 0px 350px 0px">
      <el-row>
        <img width="35px" height="35px" style="margin: 50px 0px 0px -60%" src="../img/many.png">
        <h1 style="color: white;margin: -70px 42% 0px 0px ">品类齐全，轻松购物</h1>
        <el-col :span="2" style="margin: -50px 0px 0px 37% ">
          <img width="35px" height="35px" src="../img/fast.png">
        </el-col>
        <h1 style="color: white;margin: -60px 0% 0px 0px">多仓直发，极速配送</h1>
        <el-col :span="2" style="margin: -53px 0px 0px 200px ">
          <img width="33px" height="33px" src="../img/good.png">
        </el-col>
        <h1 style="color: white;margin: -60px 0px 0px 40%">正品好货，精致服务</h1>
      </el-row>
      <el-divider></el-divider>
      <img width="50px" height="50px" src="../img/touxiang.png">
      <el-breadcrumb>
        <el-breadcrumb-item style="font-size: 18px;margin-left: 30px">关于我们</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">联系我们</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">人才招聘</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">商家入驻</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">广告服务</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">手机京东</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">友情链接</el-breadcrumb-item>
        <el-breadcrumb-item style="font-size: 18px">销售联盟</el-breadcrumb-item>
      </el-breadcrumb>
      <h1 style="color: #8a8a8a;font-size: 15px;margin: 0px 20px 0px 0px">Copyright &copy; 2021 豆嗲:D.com版权所有</h1>
    </el-footer>
  </el-container>
</template>

<script>
import ordersApi from "@/http/ordersApi";
import loginApi from "@/http/loginApi";

export default {
  name: "Order",
  created() {
    this.getList();
  },
  data(){
    return{
      orders:[]
    }
  },
  methods:{
    getList(){
      ordersApi.getListByPage().then(res =>{
        console.log(res);
        if (res.data.code == 200){
          this.orders = res.data.data.data
        }
      })
    },
    logout(){
      loginApi.logout().then(res => {
        if (res.data.code == 200) {
          this.$message.info(res.data.msg);
          sessionStorage.clear();
          this.$router.replace("/login.html");
        }
      })
    },
  }
}
</script>

<style scoped>

</style>